<script setup>
import {
  confirmInterviewApi,
  fillInEntryInfoApi,
  fillInInterviewInfoApi,
  getApplyJobListApi,
  getJobListApi,
  isEntryApi,
  updateApplyJobStatusApi
} from '@/api/job'
import Form from '@/components/User/Form.vue'
import Pagization from '@/components/common/pagization.vue'
import Table from '@/components/Job/table.vue'
import { showStatusMessage } from '@/utils/common/showMessage'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import FormJob from '@/components/Job/form.vue'
import { dayFormat } from '@/utils/common/dayjs'
import { pcaTextArr } from 'element-china-area-data'

const router = useRouter()
const userStore = useUserStore()
// 表单数据
const formData = ref({
  enterpriseName: '',
  jobName: '',
  status: ''
})
const formModel = [
  {
    prop: 'enterpriseName',
    label: '企业名称',
    type: 'input'
  },
  {
    prop: 'jobName',
    label: '职位名称',
    type: 'input'
  }
]
const btnOpt = [
  {
    name: '查询',
    btnType: '',
    prop: 'query'
  },
  {
    name: '重置',
    btnType: 'info',
    prop: 'reset'
  }
]

const formRef = ref(null)
const pagizationToatl = ref(null)

/**
 * 点击重置按钮
 */
function reset() {
  getTableData({})
  pagizationRef.value.reset()
  selectFormRef.value.reset()
}

/**
 * 表单查询事件
 * @param {Object} data 查询条件
 */
const queryData = ref(null)
async function query(data) {
  queryData.value = data
  const res = await getTableData(data)
  console.log(res)
  showStatusMessage(res)
  tableData.value = res.data
  pagizationToatl.value = res.total
}

/**
 * 表单按钮点击事件
 * @param type 操作类型
 * @param data 表单数据
 */
function handleForm(type, data) {
  // console.log(type, data)
  switch (type) {
    case 'query':
      query(data)
      break
    case 'add':
      addForm()
      break
    case 'output':
      exportToExcel()
      break
    case 'reset':
      reset(data)
      break
    case 'import':
      handleUpload(data)
      break
    case 'submit':
      handleSubmit(data)
      break
    default:
      break
  }
}

// 列表数据
const tableData = ref([])
const columns = [
  {
    prop: 'name',
    label: '姓名'
  },
  {
    prop: 'major',
    label: '专业'
  },
  {
    prop: 'jobName',
    label: '职位名称'
  },
  {
    prop: 'applyTime',
    label: '申请时间'
  },
  {
    prop: 'phone',
    label: '联系电话'
  },
  {
    prop: 'resume',
    label: '简历',
    display: 'button'
  }
]
const options = [
  {
    label: '查看进程',
    type: 'warning',
    prop: 'processMangement'
  }
]

/**
 * 获取表格数据
 */
async function getTableData(data) {
  const res = await getApplyJobListApi({
    ...data,
    exterpriseAccount: userStore.userInfo.account
  })
  tableData.value = res.data
  pagizationToatl.value = res.total
  console.log(res)
}
getTableData()
const pagizationRef = ref(null)
const selectFormRef = ref(null)
/**
 * ******************************表格的按钮操作事件***********************************
 * @param {Object} data  操作行的数据
 * @param {String} type 操作类型-’edit’-‘delete’
 */
function handleTable(data, type) {
  switch (type) {
    case 'apply':
      handletTableApply(data)
      break
    case 'resume':
      handletTableView(data)
      break
    case 'processMangement':
      handletTableProcess(data)
      break
    default:
      break
  }
}
// 同意面试
async function handletTableAgree(data) {
  const res = await updateApplyJobStatusApi({
    status: 2,
    studentAccount: data.studentAccount,
    exterpriseAccount: data.exterpriseAccount,
    jobName: data.jobName
  })
  showStatusMessage(res)
  getTableData()
  dialogProcess.value = false
}
// 拒绝面试
async function handletTableRefuse(data) {
  const res = await updateApplyJobStatusApi({
    status: 1,
    studentAccount: data.studentAccount,
    exterpriseAccount: data.exterpriseAccount,
    jobName: data.jobName
  })
  showStatusMessage(res)
  getTableData()
  dialogProcess.value = false
}
// 查看简历
const dialogViewVisible = ref(false)
const resumeData = ref('')
function handleDialogViewClose() {
  resumeData.value = ''
}
// 查看简历
async function handletTableView(value) {
  // console.log(value.resume)

  router.push({
    path: '/weeklyJournalDetail',
    state: {
      data: JSON.stringify(value.resume),
      type: 'previewResume'
    }
  })
}

// ******************************分页器事件***********************************
// 分页器条数发生变化
function handleSizeChange(val) {
  const data = selectFormRef.value.getValue()
  getTableData({ size: val, ...data })
  pagizationRef.value.reset()
}
// 分页器页数发生变化
function handleCurrentChange(page, size) {
  const data = selectFormRef.value.getValue()
  getTableData({ page, size, ...data })
}
// ******************************抽屉事件***********************************

// 控制抽屉显示
const dialog = ref(false)

// ******************************进程管理事件***********************************
const processActive = ref(1)

// 进程管理
const dialogProcess = ref(false)
const processData = ref(null)
function handletTableProcess(data) {
  if (data.status == 2 || data.status == 3 || data.status == 4) {
    processActive.value = 2
  }
  if (data.status == 5 || data.status == 6 || data.status == 7) {
    processActive.value = 3
  }
  processData.value = data

  console.log(processData.value)

  dialogProcess.value = true
}
function handleDrawerProcessClose() {
  processActive.value = 1
  dialogProcess.value = false
}
// 面试
const interviewRef = ref(null)
const interviewData = ref({
  interviewTime: '',
  interviewer: '',
  interviewPlace: '',
  interviewDetailPlace: ''
})
const interviewDataRules = {
  interviewTime: [{ required: true, message: '请选择面试时间', trigger: 'blur' }],
  interviewer: [{ required: true, message: '请输入面试官', trigger: 'blur' }],
  interviewPlace: [{ required: true, message: '请输入面试地点', trigger: 'blur' }],
  interviewDetailPlace: [{ required: true, message: '请输入详细地址', trigger: 'blur' }]
}
function interviewSubmit() {
  interviewRef.value.validate(async (valid) => {
    if (valid) {
      const res = await fillInInterviewInfoApi({
        status: 3,
        ...interviewData.value,
        interviewPlace: JSON.stringify(interviewData.value.interviewPlace),
        interviewTime: dayFormat(interviewData.value.interviewTime),
        studentAccount: processData.value.studentAccount,
        exterpriseAccount: processData.value.exterpriseAccount,
        jobName: processData.value.jobName
      })
      handleDrawerProcessClose()
      showStatusMessage(res)
      getTableData()
    }
  })
}
function interviewCancel() {
  interviewRef.value.resetFields()
}
// 面试未通过
async function handletTableInterViewRefuse() {
  const res = await confirmInterviewApi({
    status: 5,
    studentAccount: processData.value.studentAccount,
    exterpriseAccount: processData.value.exterpriseAccount,
    jobName: processData.value.jobName,
    // 学生状态追踪信息
    enterpriseName: processData.value.enterpriseName,
    interviewTime: processData.value.interviewTime,
    interviewer: processData.value.interviewer,
    name: processData.value.name,
    interviewresult: 1,
    interviewresulttime: dayFormat(new Date())
  })
  handleDrawerProcessClose()

  showStatusMessage(res)
  getTableData()
}
// 面试通过
async function handletTableInterViewAgree() {
  const res = await confirmInterviewApi({
    status: 6,
    studentAccount: processData.value.studentAccount,
    exterpriseAccount: processData.value.exterpriseAccount,
    jobName: processData.value.jobName,
    // 学生状态追踪信息
    enterpriseName: processData.value.enterpriseName,
    interviewTime: processData.value.interviewTime,
    interviewer: processData.value.interviewer,
    name: processData.value.name,
    interviewresult: 2,
    interviewresulttime: dayFormat(new Date())
  })

  handleDrawerProcessClose()

  showStatusMessage(res)
  getTableData()
}
// 入职
const entryRef = ref(null)
const entryFormData = ref({
  entryTime: '',
  entryDesc: ''
})
const entryFormDataRules = {
  entryTime: [{ required: true, message: '请选择入职时间', trigger: 'blur' }],
  entryDesc: [{ required: true, message: '请输入入职描述', trigger: 'blur' }]
}
function entrySubmit() {
  entryRef.value.validate(async (valid) => {
    if (valid) {
      entryFormData.value.entryTime = dayFormat(entryFormData.value.entryTime)
      const res = await fillInEntryInfoApi({
        status: 7,
        ...entryFormData.value,
        studentAccount: processData.value.studentAccount,
        exterpriseAccount: processData.value.exterpriseAccount,
        jobName: processData.value.jobName
      })
      showStatusMessage(res)
      getTableData()
      dialogProcess.value = false
      entryReset()
    }
  })
}
function entryReset() {
  entryRef.value.resetFields()
}
// 未入职
async function noisEntrySubmit() {
  const res = await isEntryApi({
    studentAccount: processData.value.studentAccount,
    exterpriseAccount: processData.value.exterpriseAccount,
    jobName: processData.value.jobName,
    ...entryFormData.value,
    ...processData.value,
    isentry: 1
  })
  showStatusMessage(res)
  getTableData()
  dialogProcess.value = false
  entryReset()
}
// 已经入职
async function isEntrySubmit() {
  const res = await isEntryApi({
    studentAccount: processData.value.studentAccount,
    exterpriseAccount: processData.value.exterpriseAccount,
    jobName: processData.value.jobName,
    ...entryFormData.value,
    ...processData.value,
    isentry: 2
  })
  showStatusMessage(res)
  getTableData()
  dialogProcess.value = false
  entryReset()
}

const dialogData = ref({})
</script>

<template>
  <div class="license-wrapper">
    <div class="user-content">
      <Form
        :data="formData"
        :formOpt="formModel"
        :btnOpt="btnOpt"
        @handleForm="handleForm"
        ref="selectFormRef"
      ></Form>
      <!-- 表格 -->
      <Table
        :tableData="tableData"
        :columns="columns"
        :options="options"
        @handleTable="handleTable"
      >
        <template #firstColumn>
          <el-table-column type="index" label="编号" width="100" align="center" />
        </template>
      </Table>
      <!-- 分页 -->
      <Pagization
        ref="pagizationRef"
        :total="pagizationToatl"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></Pagization>
      <!-- 抽屉 -->
      <el-drawer v-model="dialog" direction="rtl" class="demo-drawer">
        <template #header>
          <div class="drawer-title" style="font-weight: 900; font-size: 25px; letter-spacing: 15px">
            职位详情
          </div>
        </template>
        <div class="drawer-content">
          <div class="content-list"><span>公司名称：</span>{{ dialogData.enterpriseName }}</div>
          <div class="content-list"><span>岗位薪资：</span>{{ dialogData.salary }}</div>
          <div class="content-list"><span>职位名称：</span>{{ dialogData.jobName }}</div>
          <div class="content-list"><span>职位描述：</span>{{ dialogData.jobDesc }}</div>
          <div class="content-list"><span>任职要求：</span>{{ dialogData.jobRequire }}</div>
          <div class="content-list"><span>地址：</span>{{ dialogData.jobLocation.join('') }}</div>
          <div class="content-list"><span>详细地址：</span>{{ dialogData.jobDetailLocation }}</div>
          <div class="content-list"><span>联系电话：</span>{{ dialogData.phone }}</div>
        </div>
      </el-drawer>

      <el-dialog v-model="dialogViewVisible" top="5vh" width="1200" @close="handleDialogViewClose">
        <embed :src="resumeData" type="" width="100%" height="800" />
      </el-dialog>
      <!-- 进程管理 -->
      <el-drawer
        v-model="dialogProcess"
        direction="rtl"
        class="demo-drawer"
        @closed="handleDrawerProcessClose"
        :modal="false"
      >
        <template #header>
          <div class="drawer-title" style="font-weight: 900; font-size: 25px; letter-spacing: 15px">
            申请进程
          </div>
        </template>
        <div class="drawer-content" style="display: flex">
          <div style="height: 700px; width: 20%">
            <el-steps direction="vertical" :active="processActive">
              <el-step title="职位申请" />
              <el-step title="面试" />
              <el-step title="是否入职" />
            </el-steps>
          </div>
          <!-- 1.职位申请状态 -->
          <div
            class="content"
            :class="{ refuse: processData.status == 1 }"
            style="width: 80%"
            v-if="processActive == 1"
          >
            <!-- 基本信息 -->
            <div class="info-section">
              <h3 class="section-title">基本信息</h3>
              <div class="item" v-if="processData.name">
                <span class="label">申请人姓名: </span>{{ processData.name }}
              </div>
              <div class="item" v-if="processData.applyTime">
                <span class="label">申请时间: </span>{{ processData.applyTime }}
              </div>
              <div class="item" v-if="processData.jobName">
                <span class="label">申请职位: </span>{{ processData.jobName }}
              </div>
              <div class="item" v-if="processData.phone">
                <span class="label">联系电话: </span>{{ processData.phone }}
              </div>
              <div class="item" v-if="processData.major">
                <span class="label">专业: </span>{{ processData.major }}
              </div>
            </div>

            <!-- 企业信息 -->
            <div class="info-section">
              <h3 class="section-title">企业信息</h3>
              <div class="item" v-if="processData.enterpriseName">
                <span class="label">企业名称: </span>{{ processData.enterpriseName }}
              </div>
              <div class="item" v-if="processData.exterpriseAccount">
                <span class="label">企业账号: </span>{{ processData.exterpriseAccount }}
              </div>
            </div>

            <!-- 申请状态 -->
            <div class="info-section">
              <h3 class="section-title">申请状态</h3>

              <div class="item" v-if="processData.status">
                <span class="label">当前状态: </span>
                <el-tag type="danger" v-if="processData.status === 1">已拒绝</el-tag>
              </div>
              <div class="item" v-else>
                <span class="label">当前状态: </span>
                <el-button type="info" plain @click="handletTableRefuse(processData)"
                  >不符合</el-button
                >
                <el-button type="primary" plain @click="handletTableAgree(processData)"
                  >符合</el-button
                >
              </div>
              <div class="item" v-if="processData.resultTime">
                <span class="label">处理时间: </span>{{ processData.resultTime }}
              </div>
            </div>
          </div>
          <!-- 2.面试结果 -->
          <div class="content" style="width: 80%" v-if="processActive == 2">
            <el-alert
              title="注意"
              v-if="processData.status == 2"
              type="success"
              :description="`已经在${processData.resultTime}认为该学生符合岗位需求,请联系学生，安排面试`"
              show-icon
              style="margin-top: 20px; margin-bottom: 20px"
            />
            <div class="item"><span class="label">申请人姓名：</span>{{ processData.name }}</div>
            <div class="item">
              <span class="label">确认符合岗位需求时间: </span>
              {{ processData.resultTime }}
            </div>
            <div class="item">
              <span class="label">申请人联系电话: </span>
              {{ processData.phone }}
            </div>

            <el-alert
              title="注意"
              v-if="processData.status == 2"
              type="warning"
              description="如果已经与学生沟通完毕后，请填写面试信息"
              show-icon
              style="margin-top: 20px; margin-bottom: 20px"
            />
            <div class="item" v-if="processData.status == 2">
              <el-form
                ref="interviewRef"
                :model="interviewData"
                :rules="interviewDataRules"
                label-position="left"
                label-width="110"
              >
                <el-form-item label="面试时间:" prop="interviewTime">
                  <el-date-picker
                    v-model="interviewData.interviewTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                    format="YYYY-MM-DD HH:mm:ss"
                  />
                </el-form-item>
                <el-form-item label="面试官:" prop="interviewer">
                  <el-input v-model="interviewData.interviewer" placeholder="请输入面试官姓名" />
                </el-form-item>
                <el-form-item label="面试地址:" prop="interviewPlace">
                  <!-- 地址选择器 -->
                  <el-cascader :options="pcaTextArr" v-model="interviewData.interviewPlace">
                  </el-cascader>
                </el-form-item>
                <el-form-item label="面试详细地址:" prop="interviewDetailPlace">
                  <el-input
                    v-model="interviewData.interviewDetailPlace"
                    placeholder="请输入详细地址"
                    :autosize="{ minRows: 2, maxRows: 7 }"
                    type="textarea"
                  />
                </el-form-item>
                <el-button @click="interviewCancel">重置</el-button>
                <el-button @click="interviewSubmit" type="primary" plain>提交</el-button>
              </el-form>
            </div>
            <div class="item" v-else-if="processData.status == 3">
              <el-alert
                title="等待确认"
                type="info"
                description="等待学生确认面试信息..."
                show-icon
                style="margin: 20px 0"
                :closable="false"
              />
            </div>
            <div class="item" v-else-if="processData.status == 4">
              <el-alert
                title="提示"
                type="success"
                description="学生已确认面试信息"
                show-icon
                style="margin-top: 20px; margin-bottom: 20px"
              />
              <span class="label" style="margin-top: 10px; margin-bottom: 10px">面试结果：</span>
              <el-form label-position="left" label-width="100">
                <el-form-item label="面试时间:">
                  <el-date-picker
                    v-model="processData.interviewTime"
                    type="datetime"
                    placeholder="选择日期时间"
                    style="width: 100%"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="面试官:">
                  <el-input
                    v-model="processData.interviewer"
                    placeholder="请输入面试官姓名"
                    disabled
                  />
                </el-form-item>
                <el-button type="danger" plain @click="handletTableInterViewRefuse()"
                  >未通过</el-button
                >
                <el-button type="primary" plain @click="handletTableInterViewAgree()"
                  >通过</el-button
                >
              </el-form>
            </div>
          </div>
          <!-- 3.是否入职 -->
          <div class="content" style="width: 80%" v-if="processActive == 3">
            <el-alert
              title="注意"
              v-if="processData.status == 5"
              type="success"
              description="未通过面试"
              show-icon
              style="margin-top: 20px; margin-bottom: 20px"
            />
            <div class="entry" v-if="processData.status == 6">
              <el-alert
                title="注意"
                type="success"
                description="通过面试，请填写入职相关信息"
                show-icon
              />
              <el-form
                style="margin-top: 20px"
                :model="entryFormData"
                label-width="120px"
                label-position="left"
                :rules="entryFormDataRules"
                ref="entryRef"
              >
                <el-form-item label="入职时间：" prop="entryTime">
                  <el-date-picker
                    v-model="entryFormData.entryTime"
                    type="datetime"
                    placeholder="选择入职时间"
                  />
                </el-form-item>
                <el-form-item label="入职注意事项：" prop="entryDesc">
                  <el-input
                    type="textarea"
                    v-model="entryFormData.entryDesc"
                    placeholder="请输入入职注意事项"
                    :autosize="{ minRows: 4 }"
                  ></el-input>
                </el-form-item>
                <el-button @click="entryReset" type="info" plain>取消</el-button>
                <el-button @click="entrySubmit" type="primary" plain>确认</el-button>
              </el-form>
            </div>
            <div class="entry" v-if="processData.status == 7">
              <el-alert
                v-if="processData.entryTime == null"
                title="注意"
                type="success"
                description="通过面试，请填写入职相关信息"
                show-icon
              />
              <el-form
                style="margin-top: 20px"
                :model="entryFormData"
                label-width="120px"
                label-position="left"
                :rules="entryFormDataRules"
                ref="entryRef"
              >
                <el-form-item label="入职时间：" prop="entryTime">
                  <el-date-picker
                    v-model="processData.entryTime"
                    type="datetime"
                    placeholder="选择入职时间"
                    disabled
                  />
                </el-form-item>
                <el-form-item label="入职注意事项：" prop="entryDesc">
                  <el-input
                    type="textarea"
                    v-model="processData.entryDesc"
                    placeholder="请输入入职注意事项"
                    :autosize="{ minRows: 4 }"
                  ></el-input>
                </el-form-item>
              </el-form>
              <!-- 是否已经入职 -->
              <template v-if="processData.isentry === 0">
                <el-alert
                  title="提示"
                  type="warning"
                  :description="`请确认是否在${processData.entryTime}前完成入职`"
                  show-icon
                />

                <el-button @click="noisEntrySubmit" type="info" plain>未入职</el-button>
                <el-button @click="isEntrySubmit" type="primary" plain>已入职</el-button>
              </template>

              <template v-else-if="processData.isentry === 1">
                <el-alert title="提示" type="error" description="未按时完成入职" show-icon />
              </template>

              <template v-else-if="processData.isentry === 2">
                <el-alert title="提示" type="success" description="已按时完成入职" show-icon />
              </template>
            </div>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.license-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: start;
  min-height: 100%;
  background-color: #f5f7fa;

  .user-content {
    width: 100%;
    padding: 20px;
    text-align: left;
    overflow: auto;

    // 抽屉样式优化
    .demo-drawer {
      .drawer-title {
        color: #303133;
        margin-bottom: 20px;
      }

      .drawer-content {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;

        // 进程管理内容区
        .content {
          background: #fff;
          border-radius: 8px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

          .item {
            margin-bottom: 5px;
            line-height: 1.8;

            .label {
              font-size: 16px;
              font-weight: 600;
              color: #606266;
              margin-right: 8px;
            }

            // 按钮组样式
            .el-button {
              margin-right: 12px;

              &:last-child {
                margin-right: 0;
              }
            }
          }

          // 表单样式优化
          .el-form {
            max-width: 600px;

            .el-form-item {
              margin-bottom: 24px;
            }

            .el-input,
            .el-date-picker {
              width: 100%;
            }
          }

          .info-section {
            background: #fff;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 24px;

            &:last-child {
              margin-bottom: 0;
            }

            .section-title {
              font-size: 18px;
              font-weight: 600;
              color: #303133;
              margin-bottom: 16px;
              padding-bottom: 12px;
              border-bottom: 1px solid #ebeef5;
            }

            .item {
              display: flex;
              align-items: center;
              margin-bottom: 12px;
              line-height: 1.8;

              &:last-child {
                margin-bottom: 0;
              }

              .label {
                min-width: 100px;
                font-size: 14px;
                font-weight: 600;
                color: #606266;
              }

              .el-tag {
                margin-left: 8px;
              }
            }
          }

          &.refuse {
            position: relative;

            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 200px;
              height: 200px;
              background: url('@/assets/image/jobApply/不通过.png') no-repeat center;
              background-size: contain;
              opacity: 0.1;
              pointer-events: none;
            }
          }
        }

        // 内容列表样式
        .content-list {
          margin-bottom: 24px;
          padding: 12px 0;
          border-bottom: 1px solid #ebeef5;

          span {
            font-size: 16px;
            font-weight: 600;
            color: #606266;
            margin-right: 8px;
          }
        }

        // 入职表单区域
        .entry {
          background: #fff;
          border-radius: 8px;
          margin-top: 20px;

          .el-alert {
            margin-bottom: 24px;
          }

          .el-form {
            max-width: 600px;
          }
        }
      }
    }

    // 表格上方的查询表单
    .el-form {
      background: #fff;
      padding: 15px;
      border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    }

    // 表格区域
    .el-table {
      background: #fff;
      border-radius: 8px;
      margin-bottom: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    }

    // 分页器样式
    .el-pagination {
      padding: 20px 0;
      text-align: right;
      background: #fff;
      border-radius: 8px;
      padding: 16px 24px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    }
  }
}

// 状态样式
.access {
  background: url('@/assets/image/jobApply/通过.png') no-repeat center;
  background-size: contain;
  opacity: 0.1;
}

.refuse {
  background: url('@/assets/image/jobApply/不通过.png') no-repeat center;
  background-size: contain;
  opacity: 0.1;
}
</style>
